<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>控制面板</a-breadcrumb-item>
      <a-breadcrumb-item>用户维护</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="用户维护">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="用户代码">
                  <a-input v-model="formModel.userCode" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="用户名称">
                  <a-input v-model="formModel.userName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="电子邮箱">
                  <a-input v-model="formModel.email" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="移动电话">
                  <a-input v-model="formModel.cellphone" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
            <a-button type="outline" @click="showRoles">
              <template #icon>
                <icon-menu />
              </template>
              角色明细
            </a-button>
            <a-button type="outline" @click="showGroups">
              <template #icon>
                <icon-menu />
              </template>
              用户组明细
            </a-button>
            <a-button type="primary" @click="btnResetPassword">
              <template #icon>
                <icon-pen />
              </template>
              重置用户口令
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="btn-right-col">
        </a-col>
      </a-row>

      <a-table row-key="userId" :loading="loading" :pagination="pagination" :columns="columns" :data="renderData"
        :bordered="false" :size="'medium'" :row-selection="rowSelection" @select="rowSelect"
        @page-change="onPageChange">
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span style="font-size: 1.3em; color: #777;">
            <icon-eye @click="btnView(record)" />&nbsp;
            <icon-edit @click="btnEdit(record)" />&nbsp;
            <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>

    <a-modal :visible="modalType > 0" modal-class="big" :footer="modalType > 1" title="用户详情"
      @ok="btnEditSave(fetchData)" @cancel="modalType = 0">
      <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="right"
        :disabled="modalType == 1">
        <a-form-item label="用户代码" required>
          <a-input v-model="currRecord.userCode" />
        </a-form-item>
        <a-form-item label="用户名称" required>
          <a-input v-model="currRecord.userName" />
        </a-form-item>
        <a-form-item label="用户类型" required>
          <a-select v-model="currRecord.userTypeId" :options="parType" allow-search></a-select>
        </a-form-item>
        <a-form-item label="账户类型" required>
          <a-select v-model="currRecord.accountTypeId" :options="parType2" allow-search></a-select>
        </a-form-item>
        <a-form-item label="关联代码">
          <a-input v-model="currRecord.referenceCode" />
        </a-form-item>
        <a-form-item label="电子邮箱">
          <a-input v-model="currRecord.email" />
        </a-form-item>
        <a-form-item label="移动电话">
          <a-input v-model="currRecord.cellphone" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用">
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
        <a-form-item label="创建时间">
          <span>{{ formatTime(currRecord.creationTime, 2) }}</span>
        </a-form-item>
        <a-form-item label="创建人">
          <span>{{ currRecord.creatorName }}</span>
        </a-form-item>
      </a-form>
    </a-modal>
    <UserRoles :show="roleVisible" :appid="formModel.applicationId" :userid="currSelect" @close="roleVisible = false" />

    <UserGroups :show="groupVisible" :appid="formModel.applicationId" :userid="currSelect"
      @close="groupVisible = false" />
  </div>
</template>

<script lang="ts" setup>
import UserRoles from './roles.vue';
import UserGroups from './groups.vue';
import { computed, ref, watch } from 'vue';
import { formatTime, getPostData, toTree } from '@/utils';
import useLoading from '@/hooks/loading';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import type { TableColumnData, TableData } from '@arco-design/web-vue/es/table/interface';
import { getList } from '@/api/dashboard/users';
import { formModel, pagination, columns, rowSelection } from './const';
import {
  parType, parType2, modalType, currRecord, btnView, btnEdit, btnEditSave, btnDelete, addNew, btnResetPassword, rowSelect, currSelect,
  showRoles, roleVisible, showGroups, groupVisible
} from './event';

const { loading, setLoading } = useLoading(true);

const renderData = ref<TableData[]>();

const defOption: SelectOptionData = {
  label: '-必选-',
  value: 0
};

const search = () => {
  pagination.current = 1;
  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const fetchData = async () => {
  let pdata = getPostData(pagination, formModel.value, 'userId');
  setLoading(true);
  const data = await getList(pdata);
  pagination.total = data.totalCount;
  data.items.forEach((a: any, i: number) => {
    a.time = formatTime(a.creationTime, 2);
  });
  renderData.value = data.items;
  setLoading(false);
};

fetchData();
</script>
